<!--
 * @页面名称:element表格2
 * @描述: 
 * @作者: 
 * @Date:
-->
<!--
 * @页面名称:element表格1
 * @描述: 
 * @作者: 
 * @Date:
-->
<template>
  <div class="main-box">
    <splitpanes :dbl-click-splitter="false" style="display: flex; height: 100%">
      <pane size="15">
        <TreeFilter
          label="Fonds_Name"
          title="部门列表(单选)"
          :data="treeFilterData"
          :default-value="initParam.departmentId"
          id="Fonds_ID"
          @change="changeTreeFilter"
        />
      </pane>
      <pane size="85">
        <div class="table-box">
          <splitpanes horizontal :dbl-click-splitter="false" style="display: flex; height: 100%">
            <pane size="55">
              <ProTable
                ref="proTable"
                title="用户列表"
                row-key="Dept_ID"
                :indent="30"
                :columns="columns"
                :request-api="getTable"
                :request-auto="false"
                :init-param="initParam"
                :search-col="{ xs: 1, sm: 1, md: 2, lg: 3, xl: 3 }"
                @rowClick="rowClick"
                @selection-change="selectionChange"
              >
                <!-- 表格 header 按钮 -->
                <template #tableHeader>
                  <el-button type="primary" :disabled="ButtonDisabled[0]" :icon="CirclePlus" @click="openDrawer('新增')"
                    >新增用户</el-button
                  >
                  <el-button type="primary" :disabled="downloadDisabled" :icon="Download" plain @click="download"
                    >前端导出</el-button
                  >
                  <el-button type="primary" :disabled="downloadDisabled2" :icon="Download" plain @click="download2"
                    >导出</el-button
                  >
                </template>
                <!-- 表格操作 -->
                <template #operation="scope">
                  <el-button type="primary" link :icon="View" @click="openDrawer('查看', scope.row)">查看</el-button>
                  <el-button type="primary" link :icon="EditPen" @click="openDrawer('编辑', scope.row)">编辑</el-button>
                  <el-button type="primary" link :icon="Delete" @click="deleteAccount(scope.row)">删除</el-button>
                </template>
              </ProTable>
            </pane>
            <pane size="45">
              <ProTable
                ref="proTable2"
                title="用户列表"
                row-key="Dept_ID"
                :indent="30"
                :columns="columns2"
                :request-api="getTable"
                :request-auto="false"
                :init-param="initParam2"
                :pagination="false"
              >
                <!-- 表格 header 按钮 -->
                <template #tableHeader>
                  <el-button type="primary" :disabled="ButtonDisabled2[0]" :icon="CirclePlus" @click="openDrawer2('新增')"
                    >新增用户</el-button
                  >
                </template>
                <!-- 表格操作 -->
                <template #operation="scope">
                  <el-button type="primary" link :icon="View" @click="openDrawer2('查看', scope.row)">查看</el-button>
                  <el-button type="primary" link :icon="EditPen" @click="openDrawer2('编辑', scope.row)">编辑</el-button>
                  <el-button type="primary" link :icon="Delete" @click="deleteAccount2(scope.row)">删除</el-button>
                </template>
              </ProTable>
            </pane>
          </splitpanes>
          <ImportExcel ref="dialogRef" />
        </div>
      </pane>
    </splitpanes>
    <!-- 主表新增修改弹框 -->
    <el-dialog v-model="dialogSetting.visible" :title="dialogSetting.title" width="30%" draggable>
      <el-form label-width="90px" :model="formData" :rules="rules" ref="formRef">
        <el-form-item label="顺序号:" prop="dept_Order">
          <el-input v-model="formData.dept_Order"></el-input>
        </el-form-item>
        <el-form-item label="部门名称1:" prop="dept_Name">
          <el-input v-model="formData.dept_Name"></el-input>
        </el-form-item>
        <el-form-item label="部门名称2:" prop="dept_Name2">
          <el-input v-model="formData.dept_Name2"></el-input>
        </el-form-item>
        <el-form-item label="部门名称3:" prop="dept_Name3">
          <el-input v-model="formData.dept_Name3"></el-input>
        </el-form-item>
        <el-form-item label="部门代号1:" prop="dept_Code">
          <el-input v-model="formData.dept_Code"></el-input>
        </el-form-item>
        <el-form-item label="部门代号2:" prop="dept_Code2">
          <el-input v-model="formData.dept_Code2"></el-input>
        </el-form-item>
        <el-form-item label="部门代号3:" prop="dept_Code3">
          <el-input v-model="formData.dept_Code3"></el-input>
        </el-form-item>
        <el-form-item label="父级:" prop="dept_Father">
          <el-tree-select
            style="width: 100%"
            check-strictly
            v-model="formData.dept_Father"
            node-key="Dept_ID"
            :props="{ label: 'Dept_Name', children: 'children' }"
            :data="parentData"
            :render-after-expand="false"
          />
        </el-form-item>
        <el-form-item label="是否启用:" prop="dept_Enable">
          <el-checkbox v-model="formData.dept_Enable"></el-checkbox>
        </el-form-item>
        <el-form-item label="备注:" prop="dept_Remark">
          <el-input v-model="formData.dept_Remark"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogSetting.visible = false">取消</el-button>
          <el-button type="primary" @click="handle"> 确定 </el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 主表新增修改弹框 -->
    <el-dialog v-model="dialogSetting2.visible" :title="dialogSetting2.title" width="30%" draggable>
      <el-form label-width="90px" :model="formData2" :rules="rules2" ref="formRef2">
        <el-form-item label="顺序号:" prop="dept_Order">
          <el-input v-model="formData2.dept_Order"></el-input>
        </el-form-item>
        <el-form-item label="部门名称1:" prop="dept_Name">
          <el-input v-model="formData2.dept_Name"></el-input>
        </el-form-item>
        <el-form-item label="部门名称2:" prop="dept_Name2">
          <el-input v-model="formData2.dept_Name2"></el-input>
        </el-form-item>
        <el-form-item label="部门名称3:" prop="dept_Name3">
          <el-input v-model="formData2.dept_Name3"></el-input>
        </el-form-item>
        <el-form-item label="部门代号1:" prop="dept_Code">
          <el-input v-model="formData2.dept_Code"></el-input>
        </el-form-item>
        <el-form-item label="部门代号2:" prop="dept_Code2">
          <el-input v-model="formData2.dept_Code2"></el-input>
        </el-form-item>
        <el-form-item label="部门代号3:" prop="dept_Code3">
          <el-input v-model="formData2.dept_Code3"></el-input>
        </el-form-item>
        <el-form-item label="父级:" prop="dept_Father">
          <el-tree-select
            style="width: 100%"
            check-strictly
            v-model="formData2.dept_Father"
            node-key="Dept_ID"
            :props="{ label: 'Dept_Name', children: 'children' }"
            :data="parentData"
            :render-after-expand="false"
          />
        </el-form-item>
        <el-form-item label="是否启用:" prop="dept_Enable">
          <el-checkbox v-model="formData2.dept_Enable"></el-checkbox>
        </el-form-item>
        <el-form-item label="备注:" prop="dept_Remark">
          <el-input v-model="formData2.dept_Remark"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogSetting2.visible = false">取消</el-button>
          <el-button type="primary" @click="handle2"> 确定 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="tsx" name="treeProTable">
import { reactive, ref, onMounted } from "vue";
import ProTable from "@/components/ProTable/index.vue";
import TreeFilter from "@/components/TreeFilter/index.vue";
import ImportExcel from "@/components/ImportExcel/index.vue";
import { CirclePlus, Delete, EditPen, View, Download } from "@element-plus/icons-vue";
import type { FormInstance, FormRules } from "element-plus";
import { Splitpanes, Pane } from "splitpanes";
import "splitpanes/dist/splitpanes.css";
import useCurrentInstance from "@/utils/useCurrentInstance";
import { transTree } from "@/utils/util";

const { proxy } = useCurrentInstance();
// 前端导出按钮配置
const downloadDisabled = ref(true);
// 导出按钮配置
const downloadDisabled2 = ref(true);
// tree数据
const treeFilterData = ref<any>([]);
// tree点击保存节点
const treeClickObj: any = ref({});
// 主表弹出框配置参数
const dialogSetting = reactive({
  visible: false,
  title: ""
});
// 主表按钮禁用
const ButtonDisabled = ref([true]);
// 子表弹出框配置参数
const dialogSetting2 = reactive({
  visible: false,
  title: ""
});
// 子表按钮禁用
const ButtonDisabled2 = ref([true]);
// 表格配置列
const columns: any[] = reactive([
  { type: "selection" },
  { prop: "Dept_Order", label: "顺序号" },
  { prop: "Dept_Name", label: "部门名称" },
  { prop: "Dept_Name2", label: "部门名称2" },
  { prop: "Dept_Name3", label: "部门名称3" },
  { prop: "Dept_Code", label: "部门代号" },
  { prop: "Dept_Code2", label: "部门代号2" },
  { prop: "Dept_Code3", label: "部门代号3" },
  {
    prop: "Dept_Enable",
    label: "是否启用",
    tag: true,
    render: (scope: any) => {
      return <el-tag type={scope.row.Dept_Enable ? "success" : "danger"}>{scope.row.Dept_Enable ? "启用" : "禁用"}</el-tag>;
    }
  },
  { prop: "Dept_Remark", label: "备注" },
  { prop: "operation", label: "操作", width: 300, fixed: "right" }
]);
const columns2: any[] = reactive([
  { prop: "Dept_Order", label: "顺序号" },
  { prop: "Dept_Name", label: "部门名称" },
  { prop: "Dept_Name2", label: "部门名称2" },
  { prop: "Dept_Name3", label: "部门名称3" },
  { prop: "Dept_Code", label: "部门代号" },
  { prop: "Dept_Code2", label: "部门代号2" },
  { prop: "Dept_Code3", label: "部门代号3" },
  {
    prop: "Dept_Enable",
    label: "是否启用",
    tag: true,
    render: (scope: any) => {
      return <el-tag type={scope.row.Dept_Enable ? "success" : "danger"}>{scope.row.Dept_Enable ? "启用" : "禁用"}</el-tag>;
    }
  },
  { prop: "Dept_Remark", label: "备注" },
  { prop: "operation", label: "操作", width: 300, fixed: "right" }
]);
// 获取 ProTable 元素
const proTable = ref();
// 初始化请求参数
const initParam = reactive({ departmentId: "" });
const initParam2 = reactive({ departmentId: "" });
// 主表表单配置
const formData = reactive({
  dept_Code: "",
  dept_Code2: "",
  dept_Code3: "",
  dept_Name: "",
  dept_Name2: "",
  dept_Name3: "",
  dept_Enable: true,
  dept_Father: null as any,
  dept_Order: 1,
  dept_Remark: ""
});
// 主表表单规则
const rules = reactive<FormRules>({});
// 主表表单实例
const formRef = ref<FormInstance>();
// 子表表单配置
const formData2 = reactive({
  dept_Code: "",
  dept_Code2: "",
  dept_Code3: "",
  dept_Name: "",
  dept_Name2: "",
  dept_Name3: "",
  dept_Enable: true,
  dept_Father: null as any,
  dept_Order: 1,
  dept_Remark: ""
});
// 子表表单规则
const rules2 = reactive<FormRules>({});
// 子表表单实例
const formRef2 = ref<FormInstance>();
// 弹出框表单父级数据
const parentData = ref<any[]>([]);
// 表格多选数据
const selectionData = ref([]);
// 获取树数据
const getTree = () => {
  proxy.$vueAxios.get("MasterBaseFonds/GetFondsTree").then((res: any) => {
    treeFilterData.value = transTree(res.List, "Fonds_ID", "Fonds_Father");
  });
};
// 树形筛选切换
const changeTreeFilter = (node: any) => {
  treeClickObj.value = node;
  proTable.value.pageable.pageIndex = 1;
  initParam.departmentId = node.Fonds_ID;
  ButtonDisabled.value = [false];
};
// 获取表格数据
const getTable = (params: any) => {
  return proxy.$vueAxios.post("Master_Base_Dept/GetConditional", {
    ...params,
    order: "Dept_Order asc",
    dtoList: [{ fieldName: "Fonds_ID", fieldValue: treeClickObj.value.Fonds_ID, conditionalType: 0 }]
  });
};
// 表格单击
const rowClick = (row: any) => {
  // console.log("[ row ] >", row);
  initParam2.departmentId = treeClickObj.value.Fonds_ID;
  ButtonDisabled2.value = [false];
};
// 多选
const selectionChange = (rowArr: any) => {
  selectionData.value = rowArr;
  if (selectionData.value.length > 0) {
    downloadDisabled.value = false;
    downloadDisabled2.value = false;
  } else {
    downloadDisabled2.value = true;
    downloadDisabled.value = true;
  }
};
// 主表新增/修改/查看按钮事件
const openDrawer = (title: string, row: any = {}) => {
  switch (title) {
    case "新增":
      dialogSetting.visible = true;
      dialogSetting.title = "主表新增";
      formRef.value?.resetFields();
      break;
    case "编辑":
      dialogSetting.visible = true;
      dialogSetting.title = "子表编辑";
      break;
  }
};
// 子表新增/修改/查看按钮事件
const openDrawer2 = (title: string, row: any = {}) => {
  switch (title) {
    case "新增":
      dialogSetting.visible = true;
      dialogSetting.title = "子表新增";
      formRef2.value?.resetFields();
      break;
    case "编辑":
      dialogSetting.visible = true;
      dialogSetting.title = "子表编辑";
      break;
  }
};
// 主表删除事件
const deleteAccount = (row: any = {}) => {};
// 子表删除事件
const deleteAccount2 = (row: any = {}) => {};
// 主表新增/修改确认事件
const handle = () => {};
// 子表新增/修改确认事件
const handle2 = () => {};
// 前端导出
const download = () => {
  if (selectionData.value.length === 0) {
    proxy.$notify.warning({
      title: "提示",
      message: "未选中任何数据!"
    });
    return false;
  }
  const header = columns.filter(v => v.label).map(v => v.label);
  const filterVal = columns.filter(v => v.prop).map(v => v.prop);
  const data = selectionData.value.map((v: any) => filterVal.map((j: any) => v[j]));
  import("@/vendor/Export2Excel").then(excel => {
    excel.export_json_to_excel({
      header: header, //表头 必填
      data, //具体数据 必填
      filename: "基础表格", //非必填
      autoWidth: true, //非必填
      bookType: "xlsx" //非必填
    });
  });
};
// 导出
const download2 = () => {};
onMounted(() => {
  getTree();
});
</script>
<style lang="scss" scoped>
.filter {
  height: 100%;
  width: 100%;
  overflow: auto !important;
}
.table-box {
  width: 100%;
  :deep(.table-search) {
    margin-bottom: 5px;
  }
}
</style>
